<template>
  <div class="container">
    <div class="content-container">
      <!-- 添加 Tabs -->
      <div class="tabs-container">
        <div v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentTab === tab.value }" @click="switchTab(tab.value)">
          {{ tab.label }}
        </div>
      </div>

      <div v-if="spDataList.length > 0" class="activity-list">
        <div v-for="(item, index) in spDataList" :key="index" class="activity-card">
          <div class="activity-content">
            <div class="activity-image-container">
              <img :src="'https://www.wantongkonggu.cn/' + item.icon" :class="{ expired: item.expiredStatus != 0 }" class="activity-image" @error="handleImageError(index)" />
            </div>

            <div class="activity-info">
              <div class="activity-name">{{ item.name }}</div>
              <!-- 添加供应商名称显示 -->
              <div v-if="item.isVendorActivity == 1" class="vendor-name">
                <u-icon name="account" size="16" color="#2979ff"></u-icon>
                <text class="vendor-text">{{ item.merName }}</text>
              </div>
              <div class="activity-time">
                <u-icon name="clock" size="20" color="#999"></u-icon>
                <text class="time-text">{{ item.startTime }} 至 {{ item.endTime }}</text>
              </div>

              <div class="activity-actions">
                <div class="status-tag" :class="item.statusTagClass">
                  {{ item.statusText }}
                </div>

                <div class="action-buttons">
                  <!--   <div class="action-button coupon-button" @click="tuisong(item)">
                    <text>推送</text>
                  </div> -->
                  <div v-if="(merInfo.isVendor == 0 && item.isVendorActivity == 0) || merInfo.isVendor == 1" @click.stop="goToInfo(item)" class="action-button coupon-button">
                    <text>消费券</text>
                  </div>

                  <!-- 添加上下架按钮 -->
                  <div
                    v-if="item.expiredStatus === 0"
                    @click.stop="toggleActivityStatus(item)"
                    class="action-button"
                    :class="(item.isVendorActivity === 1 ? isVendorActivityPublished(item) : item.status === 0) ? 'offline-button' : 'online-button'"
                  >
                    <text>{{ (item.isVendorActivity === 1 ? isVendorActivityPublished(item) : item.status === 0) ? '下架' : '上架' }}</text>
                  </div>

                  <!-- 过期活动显示灰色按钮 -->
                  <div v-else class="action-button disabled-button">
                    <text>已过期</text>
                  </div>

                  <div v-if="(merInfo.isVendor == 0 && item.isVendorActivity == 0) || merInfo.isVendor == 1" @click="gotoEidt(item.id)" class="action-button edit-button">
                    <text>编辑</text>
                  </div>

                  <div v-if="(merInfo.isVendor == 0 && item.isVendorActivity == 0) || merInfo.isVendor == 1" @click.stop="delSh(item.id)" class="action-button delete-button">
                    <text>删除</text>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div v-else-if="!loading" class="empty-state">
        <u-empty mode="data" text="暂无活动数据" icon="http://cdn.uviewui.com/uview/empty/data.png" marginTop="100"> </u-empty>
      </div>

      <div v-if="loadingMore" class="loading-more">
        <u-loading-icon mode="circle" size="20" color="#2979ff"></u-loading-icon>
        <text class="loading-text">加载中...</text>
      </div>

      <!-- 显示所有数据已加载完 -->
      <div v-else-if="spDataList.length > 0 && !hasMore" class="no-more-data">
        <text>没有更多数据了</text>
      </div>
    </div>

    <u-modal :show="delSpModel" @confirm="delSpFun" @cancel="delSpModel = false" :showCancelButton="true" confirmColor="#e54d42" confirmText="删除" content="是否确认删除该活动?">
    </u-modal>
    <u-popup :show="showMerchantSelector" mode="bottom" @close="closeMerchantSelector" round>
      <view class="merchant-selector-popup">
        <view class="popup-header">
          <text class="popup-title">选择推广商户</text>
          <u-icon name="close" @click="closeMerchantSelector" size="20"> </u-icon>
        </view>
        <view class="merchant-selector">
          <view v-if="selectedMerchants.length === 0" class="placeholder-text"> 请选择推广商户 </view>
          <view v-else class="selected-merchants">
            <u-tag v-for="(merchant, index) in selectedMerchants" :key="index" :text="merchant.merName" type="primary" size="mini" closable @close="removeMerchant(index)" />
          </view>
        </view>
        <view class="search-box">
          <u-search v-model="merchantSearchKeyword" placeholder="搜索商户名称" height="60rpx" :showAction="false" @search="getDatas" @clear="getDatas"> </u-search>
        </view>

        <scroll-view class="merchant-list" scroll-y @scrolltolower="loadMoreMerchants" :refresher-enabled="true" :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
          <u-checkbox-group v-model="selectedMerchantId" @change="awdwafwadwacs">
            <u-cell-group>
              <u-cell v-for="(merchant, index) in merchants" :key="merchant.id" :title="merchant.merName" :label="merchant.merAddress || '暂无地址'">
                <template #right-icon>
                  <u-checkbox size="30" :name="merchant.id" shape="circle"> </u-checkbox>
                </template>
              </u-cell>
            </u-cell-group>
          </u-checkbox-group>

          <u-loadmore :status="loadStatus" :line="true" v-if="merchants.length > 0" />

          <view v-if="merchants.length === 0 && !loading" class="no-data">
            <u-empty mode="list" text="暂无商户数据"> </u-empty>
          </view>
        </scroll-view>

        <view class="popup-footer">
          <view class="footer-buttons">
            <u-button type="default" size="small" @click="resetSelection" style="margin-right: 10px"> 重置 </u-button>
            <u-button type="primary" size="small" @click="confirmSelection"> 确定 </u-button>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 添加上下架确认模态框 -->
    <u-modal
      :show="showStatusModal"
      @confirm="confirmStatusChange"
      @cancel="showStatusModal = false"
      :showCancelButton="true"
      :confirmColor="statusAction === 'online' ? '#2979ff' : '#e54d42'"
      :confirmText="statusAction === 'online' ? '上架' : '下架'"
      :content="'是否确认' + (statusAction === 'online' ? '上架' : '下架') + '该活动?'"
    >
    </u-modal>

    <div @click="gotoAdd()" class="add-button" hover-class="add-button-hover">
      <u-icon name="plus" color="#fff" size="20"></u-icon>
      <text class="add-button-text">添加活动</text>
    </div>
  </div>
</template>

<script>
import { activitylist, getUserInfo, activitydel, addOrUpdateReId, merlist } from '../../utils/request_sh.js';

export default {
  data() {
    return {
      merId: '',
      merchantSearchKeyword: '',
      selectedMerchantId: '',
      merchants: [],
      selectedMerchants: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      spDataList: [],
      showMerchantSelector: false,
      delSpModel: false,
      delSpId: null,
      merName: '',
      loading: true,
      loadingMore: false,
      hasMore: true, // 是否还有更多数据
      merInfo: '',
      pageNums: 1,
      pageSizes: 10,
      activeId: '',
      // 添加上下架相关数据
      showStatusModal: false,
      statusAction: '', // online 或 offline
      currentActivity: null,

      // Tabs相关数据
      currentTab: 'all', // all-全部, published-已上架, unpublished-已下架
      tabs: [
        { label: '全部', value: 'all' },
        { label: '已上架', value: 'published' },
        { label: '已下架', value: 'unpublished' }
      ]
    };
  },

  onLoad() {
    const userInfo = uni.getStorageSync('userInfo');
    const merId = userInfo ? userInfo.merId : '';

    getUserInfo(merId).then((res) => {
      uni.setStorageSync('shUserInfo', res.data);
      this.merInfo = res.data;
      this.merName = res.data.merName;
      this.getData();
    });
    this.getDatas();
  },

  onShow() {
    const userInfo = uni.getStorageSync('userInfo');
    this.merId = userInfo ? userInfo.merId : '';
    // 页面显示时刷新数据
    this.refreshData();
  },

  // 下拉刷新
  onPullDownRefresh() {
    this.refreshData();
  },

  // 上拉加载
  onReachBottom() {
    if (!this.hasMore || this.loadingMore) return;

    const allTotal = this.pageNum * this.pageSize;
    if (allTotal < this.total) {
      // 当前条数小于总条数 则增加请求页数
      this.pageNum++;
      this.getData();
    }
  },

  methods: {
    // 判断供应商活动是否已上架（用于按钮显示）
    isVendorActivityPublished(activity) {
      // 检查当前商户是否在removedIds中
      const removedIds = activity.removedIds || '';
      const removedIdArray = removedIds ? removedIds.split(',').filter((id) => id.trim() !== '') : [];

      // 如果在removedIds中表示已下架，返回false；否则表示已上架，返回true
      return !removedIdArray.includes(this.merId.toString());
    },
    resetSelection() {
      this.selectedMerchants = [];
      this.selectedMerchantId = '';
    },
    closeMerchantSelector() {
      this.showMerchantSelector = false;
    },
    removeMerchant(index) {
      this.selectedMerchants.splice(index, 1);
      // this.selectedMerchantId = '';
    },
    awdwafwadwacs(val) {
      this.merchants.forEach((item) => {
        val.forEach((itemsda) => {
          if (item.id == itemsda) {
            this.selectedMerchants.push(item);
          }
        });
      });
      const uniqueArr = this.selectedMerchants.filter((item, index, self) => {
        return index === self.findIndex((obj) => obj.id == item.id);
      });
      this.selectedMerchants = uniqueArr;
      console.log(val);
    },
    confirmSelection() {
      console.log('当前活动id：' + this.activeId);
      console.log('当前选中商户：' + this.selectedMerchants);
    },
    // 获取活动列表数据
    // 获取活动列表数据
    getData(isRefresh = false) {
      // 避免重复请求
      if (this.loadingMore) return;

      const params = {
        userRightComand: 'shanghuAdmin',
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        /*         merName: this.merName, */
        ebMerId: this.merId
        /* isVendorActivity: '' */
      };

      // 设置加载状态
      if (this.pageNum === 1) {
        this.loading = true;
      } else {
        this.loadingMore = true;
      }

      activitylist(params)
        .then((res) => {
          this.total = res.total;
          let newlist = res.rows;

          // 先根据Tab筛选活动
          if (this.currentTab === 'published') {
            // 已上架：普通活动status=0，供应商活动不在removedIds中
            newlist = newlist.filter((item) => {
              if (item.isVendorActivity === 1) {
                // 供应商活动：不在removedIds中表示已上架
                const removedIds = item.removedIds || '';
                const removedIdArray = removedIds ? removedIds.split(',').filter((id) => id.trim() !== '') : [];
                return !removedIdArray.includes(this.merId.toString()) && !this.isActivityExpired(item.endTime);
              } else {
                // 普通活动：status=0表示已上架
                return item.status === 0 && !this.isActivityExpired(item.endTime);
              }
            });
          } else if (this.currentTab === 'unpublished') {
            // 已下架：普通活动status=1，供应商活动在removedIds中或者已过期
            newlist = newlist.filter((item) => {
              if (item.isVendorActivity === 1) {
                // 供应商活动：在removedIds中或者已过期表示已下架
                const removedIds = item.removedIds || '';
                const removedIdArray = removedIds ? removedIds.split(',').filter((id) => id.trim() !== '') : [];
                return removedIdArray.includes(this.merId.toString()) || this.isActivityExpired(item.endTime);
              } else {
                // 普通活动：status=1或者已过期表示已下架
                return item.status === 1 || this.isActivityExpired(item.endTime);
              }
            });
          }

          // 为每个活动项添加状态标签类和文本
          newlist = newlist.map((item) => {
            const isExpired = this.isActivityExpired(item.endTime);
            const result = {
              ...item,
              expiredStatus: isExpired ? 1 : 0 // 更新expiredStatus以供图片使用
            };

            // 根据活动类型设置状态标签和文本
            if (item.isVendorActivity === 1) {
              // 供应商活动使用特殊方法计算状态
              result.statusTagClass = this.getStatusTagClassForVendor(item);
              result.statusText = this.getStatusTextForVendor(item);
            } else {
              // 普通活动使用原有方法计算状态
              result.statusTagClass = this.getStatusTagClass(item.expiredStatus, item.status, item.endTime);
              result.statusText = this.getStatusText(item.expiredStatus, item.status, item.endTime);
            }

            return result;
          });

          if (this.pageNum === 1) {
            this.spDataList = newlist;
          } else {
            this.spDataList.push(...newlist);
          }

          // 检查是否还有更多数据
          this.hasMore = this.spDataList.length < this.total;
        })
        .catch((err) => {
          console.error('获取活动列表失败:', err);
          uni.showToast({
            title: '获取数据失败',
            icon: 'none'
          });
        })
        .finally(() => {
          this.loading = false;
          this.loadingMore = false;

          // 停止下拉刷新
          if (isRefresh) {
            uni.stopPullDownRefresh();
          }
        });
    },
    tuisong(item) {
      this.activeId = item.id;
      this.showMerchantSelector = true;
    },
    // 刷新数据
    refreshData() {
      this.pageNum = 1;
      this.spDataList = [];
      this.hasMore = true;
      this.getData(true); // 传参表示是刷新操作
    },

    // 切换Tab
    switchTab(tabValue) {
      this.currentTab = tabValue;
      this.refreshData();
    },
    getDatas() {
      var params = {
        pageNum: this.pageNums,
        pageSize: this.pageSizes,
        merName: this.merchantSearchKeyword
      };
      merlist(params).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.merchants = res.rows;
        }
      });
    },
    // 判断活动是否过期
    isActivityExpired(endTime) {
      const now = new Date();
      const end = new Date(endTime.replace(/-/g, '/'));
      return now > end;
    },
    // 获取状态标签类名
    getStatusTagClass(expiredStatus, status, endTime) {
      // 使用 endTime 和当前时间判断是否过期
      const now = new Date();
      const end = new Date(endTime.replace(/-/g, '/')); // 兼容 Safari 浏览器
      if (now > end) {
        return 'expired-tag';
      } else if (status === 0) {
        return 'published-tag';
      } else {
        return 'unpublished-tag';
      }
    },

    // 获取状态文本
    getStatusText(expiredStatus, status, endTime) {
      // 使用 endTime 和当前时间判断是否过期
      const now = new Date();
      const end = new Date(endTime.replace(/-/g, '/')); // 兼容 Safari 浏览器
      if (now > end) {
        return '已过期';
      } else if (status === 0) {
        return '已上架';
      } else {
        return '未上架';
      }
    },
    // 跳转到消费券详情
    goToInfo(item) {
      console.log('🚀 ~ item:', item);
      uni.navigateTo({
        url: '/pages_sh/gyhHd/hdxfj?id=' + item.id + '&msrp=' + item.msrp
      });
    },

    // 删除活动确认
    delSpFun() {
      activitydel(this.delSpId)
        .then((res) => {
          if (res.code === 200) {
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
            this.delSpModel = false;
            this.refreshData();
          } else {
            uni.showToast({
              title: '删除失败',
              icon: 'none'
            });
          }
        })
        .catch((err) => {
          uni.showToast({
            title: '删除出错',
            icon: 'none'
          });
          console.error('删除活动出错:', err);
        });
    },

    // 打开删除确认框
    delSh(id) {
      this.delSpId = id;
      this.delSpModel = true;
    },

    // 跳转到添加活动页面
    gotoAdd() {
      uni.navigateTo({
        url: '/pages_sh/active/activeManage'
      });
    },

    // 跳转到编辑活动页面
    gotoEidt(id) {
      console.log('🚀 ~ gotoEidt ~ id:', id);
      uni.navigateTo({
        url: '/pages_sh/active/activeManage?id=' + id
      });
    },

    // 处理图片加载失败
    handleImageError(index) {
      // 可以设置默认图片
      // this.spDataList[index].icon = '默认图片路径'
    },

    // 切换活动状态
    toggleActivityStatus(activity) {
      // 过期活动不能上下架
      if (activity.expiredStatus !== 0) {
        uni.showToast({
          title: '过期活动无法操作上下架',
          icon: 'none'
        });
        return;
      }

      this.currentActivity = activity;

      // 根据活动类型判断当前状态
      let currentStatus;
      if (activity.isVendorActivity === 1) {
        // 供应商活动：检查是否在removedIds中
        const removedIds = activity.removedIds || '';
        const removedIdArray = removedIds ? removedIds.split(',').filter((id) => id.trim() !== '') : [];
        currentStatus = removedIdArray.includes(this.merId.toString()) ? 1 : 0; // 1下架 0上架
      } else {
        // 普通活动：直接使用status
        currentStatus = activity.status;
      }

      // 如果当前是上架状态(0)，则执行下架操作
      if (currentStatus === 0) {
        this.statusAction = 'offline';
      } else {
        // 如果当前是下架状态(1)，则执行上架操作
        this.statusAction = 'online';
      }
      this.showStatusModal = true;
    },

    // 确认状态变更
    confirmStatusChange() {
      this.showStatusModal = false;
      if (!this.currentActivity) return;

      const activity = this.currentActivity;

      // 根据活动类型判断当前状态
      let currentStatus;
      if (activity.isVendorActivity === 1) {
        // 供应商活动：检查是否在removedIds中
        const removedIds = activity.removedIds || '';
        const removedIdArray = removedIds ? removedIds.split(',').filter((id) => id.trim() !== '') : [];
        currentStatus = removedIdArray.includes(this.merId.toString()) ? 1 : 0; // 1下架 0上架
      } else {
        // 普通活动：直接使用status
        currentStatus = activity.status;
      }

      const newStatus = currentStatus === 0 ? 1 : 0; // 切换状态

      // 构造更新参数
      const updateParams = {
        ...activity,
        icon: activity.icon,
        ebMerId: activity.ebMerId,
        sortFields: ['ea.active_order'],
        sortOrderType: 'DESC'
      };

      // 根据活动类型处理状态变更
      if (activity.isVendorActivity === 1) {
        // 供应商活动处理逻辑
        updateParams.isVendorActivity = 1;

        // 获取当前的removedIds
        let removedIds = activity.removedIds || '';
        const currentMerId = this.merId.toString();

        if (newStatus === 1) {
          // 下架操作 - 在removedIds中添加当前商户ID
          let removedIdArray = removedIds ? removedIds.split(',').filter((id) => id.trim() !== '') : [];
          // 添加当前商户ID（如果不存在）
          if (!removedIdArray.includes(currentMerId)) {
            removedIdArray.push(currentMerId);
          }
          // 去重处理
          removedIdArray = [...new Set(removedIdArray)];
          updateParams.removedIds = removedIdArray.join(',');
          // 供应商活动不改变status，保持原值
          updateParams.status = activity.status;
        } else {
          // 上架操作 - 从removedIds中移除当前商户ID
          const removedIdArray = removedIds ? removedIds.split(',').filter((id) => id.trim() !== '') : [];
          const updatedRemovedIds = removedIdArray.filter((id) => id !== currentMerId);
          // 对结果进行去重处理
          const uniqueRemovedIds = [...new Set(updatedRemovedIds)];
          updateParams.removedIds = uniqueRemovedIds.join(',');
          // 供应商活动不改变status，保持原值
          updateParams.status = activity.status;
        }
      } else {
        // 普通活动直接更改status
        updateParams.status = newStatus;
      }

      // 调用更新接口
      addOrUpdateReId(updateParams)
        .then((res) => {
          if (res.code === 200) {
            uni.showToast({
              title: `${newStatus === 0 ? '上架' : '下架'}成功`,
              icon: 'success'
            });

            // 更新本地数据
            // 供应商活动保持status不变，只更新removedIds相关状态
            if (activity.isVendorActivity === 1) {
              // 对于供应商活动，我们不改变status，但需要更新本地的removedIds
              activity.removedIds = updateParams.removedIds || '';
              // 重新计算状态标签和文本，基于removedIds而不是status
              activity.statusTagClass = this.getStatusTagClassForVendor(activity);
              activity.statusText = this.getStatusTextForVendor(activity);

              // 更新expiredStatus
              activity.expiredStatus = this.isActivityExpired(activity.endTime) ? 1 : 0;
            } else {
              // 普通活动更新status
              activity.status = newStatus;
              activity.statusTagClass = this.getStatusTagClass(activity.expiredStatus, activity.status, activity.endTime);
              activity.statusText = this.getStatusText(activity.expiredStatus, activity.status, activity.endTime);
            }

            // 如果当前Tab不是"全部"，并且状态变更后不再符合当前筛选条件，则从列表中移除
            if (this.currentTab !== 'all') {
              // 延迟刷新，让用户看到操作成功的提示
              setTimeout(() => {
                this.refreshData();
              }, 1000);
            }
          } else {
            uni.showToast({
              title: `${newStatus === 0 ? '上架' : '下架'}失败`,
              icon: 'none'
            });
          }
        })
        .catch((err) => {
          uni.showToast({
            title: '操作出错',
            icon: 'none'
          });
          console.error('活动状态变更出错:', err);
        });
    },
    // 获取供应商活动状态标签类名
    // 获取供应商活动状态标签类名
    getStatusTagClassForVendor(activity) {
      // 使用 endTime 和当前时间判断是否过期
      const now = new Date();
      const end = new Date(activity.endTime.replace(/-/g, '/')); // 兼容 Safari 浏览器
      if (now > end) {
        return 'expired-tag';
      }

      // 检查当前商户是否在removedIds中
      const removedIds = activity.removedIds || '';
      const removedIdArray = removedIds ? removedIds.split(',').filter((id) => id.trim() !== '') : [];

      if (removedIdArray.includes(this.merId.toString())) {
        return 'unpublished-tag'; // 在removedIds中表示已下架
      } else {
        return 'published-tag'; // 不在removedIds中表示已上架
      }
    },

    // 获取供应商活动状态文本
    getStatusTextForVendor(activity) {
      // 使用 endTime 和当前时间判断是否过期
      const now = new Date();
      const end = new Date(activity.endTime.replace(/-/g, '/')); // 兼容 Safari 浏览器
      if (now > end) {
        return '已过期';
      }

      // 检查当前商户是否在removedIds中
      const removedIds = activity.removedIds || '';
      const removedIdArray = removedIds ? removedIds.split(',').filter((id) => id.trim() !== '') : [];

      if (removedIdArray.includes(this.merId.toString())) {
        return '未上架'; // 在removedIds中表示已下架
      } else {
        return '已上架'; // 不在removedIds中表示已上架
      }
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  font-size: 24rpx;
  background-color: #f5f5f5;
  box-sizing: border-box;
  padding-bottom: 120rpx;
}

.content-container {
  padding: 20rpx;
}

/* Tabs 样式 */
.tabs-container {
  display: flex;
  background-color: #fff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #666;
  border-bottom: 4rpx solid transparent;
}

.tab-item.active {
  color: #2979ff;
  border-bottom: 4rpx solid #2979ff;
  font-weight: bold;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.activity-card {
  background: #ffffff;
  border-radius: 15rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
  opacity: 1;
  transition: all 0.3s ease;
}

.activity-content {
  display: flex;
  padding: 20rpx;
}

.activity-image-container {
  width: 160rpx;
  height: 160rpx;
  border-radius: 10rpx;
  overflow: hidden;
  background-color: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.activity-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s;
}

.activity-image.expired {
  filter: grayscale(100%);
  opacity: 0.6;
}

.activity-info {
  flex: 1;
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.activity-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.vendor-name {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
  color: #2979ff;
  font-size: 24rpx;
}

.vendor-text {
  margin-left: 8rpx;
  font-weight: 500;
}

.activity-time {
  display: flex;
  align-items: center;
  margin-top: 15rpx;
  color: #999;
  font-size: 24rpx;
}

.time-text {
  margin-left: 10rpx;
}

.activity-actions {
  margin-top: 20rpx;
}

.status-tag {
  display: inline-block;
  padding: 6rpx 15rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: 500;
}

.published-tag {
  background-color: #f9ae3d;
  color: #fff;
}

.unpublished-tag {
  background-color: #3c9cff;
  color: #fff;
}

.expired-tag {
  background-color: #999;
  color: #fff;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 20rpx;
  gap: 15rpx;
}

.action-button {
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  transition: all 0.2s;
}

.action-button:active {
  transform: scale(0.95);
}

.coupon-button {
  background-color: #3c9cff;
  color: #fff;
}

.online-button {
  background-color: #2979ff;
  color: #fff;
}

.offline-button {
  background-color: #e54d42;
  color: #fff;
}

.disabled-button {
  background-color: #f5f5f5;
  color: #999;
}

.edit-button {
  border: 1px solid #2979ff;
  color: #2979ff;
  background-color: #fff;
}

.delete-button {
  background-color: #e54d42;
  color: #fff;
}

.action-button text {
  margin-left: 8rpx;
}

.empty-state {
  text-align: center;
  margin-top: 100rpx;
}

.add-button {
  position: fixed;
  bottom: 30rpx;
  left: 50%;
  transform: translateX(-50%);
  background-color: #2979ff;
  width: 80%;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30rpx;
  box-shadow: 0 6rpx 20rpx rgba(41, 121, 255, 0.4);
  transition: all 0.3s;
  z-index: 100;
}

.add-button-hover {
  transform: translateX(-50%) scale(0.98);
  box-shadow: 0 2rpx 10rpx rgba(41, 121, 255, 0.3);
}

.add-button-text {
  margin-left: 10rpx;
}

.loading-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  color: #999;
}

.loading-text {
  margin-left: 10rpx;
  font-size: 24rpx;
}

.no-more-data {
  text-align: center;
  padding: 20rpx;
  color: #999;
  font-size: 24rpx;
}

.merchant-selector-popup {
  height: 80vh;
  display: flex;
  flex-direction: column;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
}

.search-box {
  padding: 20rpx 30rpx;
  background-color: #f8f8f8;
}

.merchant-list {
  flex: 1;
  height: 0;

  .no-data {
    padding: 40rpx 0;
    text-align: center;
  }
}

.popup-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #eee;
}

.selected-info {
  font-size: 28rpx;
  color: #666;
}

.footer-buttons {
  display: flex;
}
.merchant-selector {
  background-color: #f8f9fc;
  border-radius: 12rpx;
  padding: 20rpx;
  min-height: 88rpx;
  border: 2rpx solid #ebedf0;
}

.placeholder-text {
  color: #999;
  font-size: 28rpx;
}

.selected-merchants {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.button-container {
  padding: 20rpx 0 40rpx;
}
</style>
